Pure CSS <select>

Use hidden radio buttons to design a custom selection box

by Raphael Bögel

HTML

<div class="wrapper">
  <div class="select" tabindex="-1">
    <input type="radio" name="select" id="option1" value="YourChoice" checked>
    <label for="option1">
      <span class="title">Make your choice</span>
      <span class="desc">A simple example</span>
    </label>
    <input type="radio" name="select" id="option2" value="PureCSS">
    <label for="option2">
      <span class="title">Pure CSS</span>
      <span class="desc">No JavaScript needed</span>
    </label>
    <input type="radio" name="select" id="option3" value="FullControl">
    <label for="option3">
      <span class="title">Full control</span>
      <span class="desc">Build fancy stuff</span>
    </label>
    <input type="radio" name="select" id="option4" value="Tabable">
    <label for="option4">
      <span class="title">Tabable</span>
      <span class="desc">Use tab and arrow keys to make your selection </span>
    </label>
    <input type="radio" name="select" id="option5" value="Uniform">
    <label for="option5">
      <span class="title">Uniform</span>
      <span class="desc">Make your select uniform for all modern browsers</span>
    </label>
  </div>
</div>

<p>
 Use hidden radio buttons to design a custom selection box
</p>

CSS

/* ---------------------------- CORE ---------------------------- */

.select {
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.select:active,
.select:focus {
  border: none;
  padding: 0;
  outline: none;
}

.select input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.select:not(:focus) > input[type="radio"]:not(:checked) + label {
  display: none;
}

.select:not(:focus) > input[type="radio"]:checked + label {
  pointer-events: none;
}    

.select label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.select > input[type="radio"]:checked + label {
  order: 1;
}

.select > input[type="radio"]:not(:checked) + label {
  order: 3;
}


/* ---------------------------- WRAPPER ---------------------------- */

.wrapper {
  position: relative;
  height: 50px;
}
.wrapper > .select {
  position: absolute;
}

/* ----------------------------- FONT ----------------------------- */

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v13/Zd2E9abXLFGSr9G3YK2MsDAdhzWOYhqHvOZMRGaEyPo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body{
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #212121;
}

/* ----------------------------- STYLE ----------------------------- */


.select {
  width: 420px;
}

.select > input[type="radio"]:checked + label {
  padding: 10px;
  border: 1px solid #9e9e9e;
  border-radius: 5px;
  background: url('data:image/svg+xml;utf8,<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"...